<template>
  <div class="view-container">

    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>项目管理</span>
        </div>
        <div class="header-form">
          <!--更多-->
          <div class="header-form-item">
            <el-dropdown @command="handleCommand">
              <el-button type="default" :loading="delLoading">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
<!--          <div class="header-form-item">
            <el-button type="danger" icon="el-icon-plus" @click="toAddPage">添加</el-button>
          </div>-->
          <!--搜索-->
<!--          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          <div class="header-form-item title-search">
            <el-input v-model.trim="searchForm.title" placeholder="标题" clearable @input="fetchData"></el-input>
          </div>-->
        </div>
      </div>
    </header>
<!--buildLayout: "" 【建造样式/布局】
buildNianXian: "1年" 【建设年限】
buildStage: 1 【建设阶段】
buildXingZhi: 1 【建设性质】
caiZhengpingshen: null 【财政评审】
chubusheji: null 【初步设计】
coveringArea: "1391" 【覆盖面积】
floorArea: "" 【占地面积】
fundSources: "省级补助及市级配套" 【资金来源】
fzr: 0
junGongDate: null 【竣工日期】
kaiGongDate: null 【开工日期】
kexingxingyanjiu: null 【可行性研究】
mapLat: "34.489165" 【】
mapLng: "117.812767"
otherAnQuanZL: "" 【其他安全zl】
otherGongChenGuiHua: "" 【其他工程规划】
otherHuanPingShenPi: "" 【其他环评审批】
otherLiXiangWenHao: "" 【其他立项文号】
otherRemarks: "" 【其他备注】
otherShiGongXuHe: "" 【其他施工许可】
otherTuDiShenPi: "" 【其他土地审批】
otherYongDiGuiHua: "" 【其他用地规划】
projectAddress: "徐州市西起蔺家坝闸，东至中运河"
projectCode: "SL201903" 【项目编码】
projectContent: "       不牢河西起蔺家坝闸，东至中运河，全长 72 千米，是徐州市重要的通航、行洪、排涝、调水骨干河道，流域面积 1391平方千米。1958 年至 1972 年，不牢河按照二级航道、10 年一遇排涝和协助排泄南四湖 500 立方米每秒洪水标准进行了治理；1983 年，对全线河道进行了清淤疏浚；2012 年，航道部门又对全线河道进行了清淤疏浚，并对河坡进行防护。不牢河涉及徐州市铜山区、鼓楼区、贾汪区、经济开发区、邳州市等 5 个市（区），承担徐州市城区和沿线企业、居民的防洪安全任务，目前存在堤顶高程不满足防洪要求、堤防缺口较多，堤顶无防汛道路，沿线建筑物老化、破损等问题，为满足区域防洪、排涝需要，保护区域内人民生命财产安全，根据水利部、国家发改委、财政部《加快灾后水利薄弱环节建设实施方案》，同意对不牢河 72 千米河道进行治理。本次治理保护农田 27.3 万亩，保护人口 49.8 万人。
↵        同意对不牢河按排涝 10 年一遇、防洪 20 年一遇标准进行治理。主要建设内容为：封堵堤防缺口 7.89 千米，整理堤防9.97 千米；拆建、新建穿堤涵洞 22 座；拆建青黄引河闸和瓦庄强排泵站；新建防汛道路 20.04 千米；增设实施段堤坡植物防护和排水设施等。
↵"
projectGaiSuan: 10564 【工程概算】
projectId: 1020 【工程id】
projectName: "徐州市不牢河治理工程" 【项目名称】
projectType: "水利" 【项目分类】
projectXingZhi: "1" 【项目性质】
shishifangan: null 【实施方案】
syscreated: "2019-04-11T16:27:08.393" 【系统创建时间】
xiangmujianyishu: null 【项目建议书】
zongTouZi: 10564 【总投资】-->
    <section class="table-container view-section">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
      >
        <el-table-column label="序号" align="center" width="60">
          <template slot-scope="scope">
            {{ (scope.$index+1)+(page.index-1)*page.size }}
          </template>
        </el-table-column>
        <el-table-column prop="projectCode" label="项目码" align="center" sortable width="100"/>
        <el-table-column label="项目名称"  sortable >
          <template slot-scope="s">
            <el-link v-text="s.row.projectName" @click="showDetail(s.row.projectId)"></el-link>
          </template>
        </el-table-column>
        <el-table-column prop="zongTouZi" label="总投资(万元)" align="center" sortable width="150"/>
        <el-table-column label="累计变更(万元)" align="center" sortable width="150"/>
        <el-table-column prop="kaiGongDate" label="开工日期" align="center" :formatter="dateFmt1" sortable width="150"/>
        <el-table-column prop="junGongDate" label="竣工日期" align="center" :formatter="dateFmt2" sortable width="150"/>
        <el-table-column label="进度图" align="center" width="100">
          <template>
            <el-link>进度图</el-link>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
    <el-pagination
      :page-sizes="[10, 20, 50, 100]"
      style="text-align: right"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :page-size="page.size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </footer>

  </div>
</template>

<script>
  import listMixin from '@/mixin/listMixin'
  import controllerAPI from '@/api/project/controller'
  export default {
    name: 'ProjectInfoManager',
    mixins:[listMixin],
    data() {
      return {
        mixinParams: {
          addUrl: '',
          editUrl: '/',
          propertyName: '',
          API: controllerAPI
        },
      }
    },
    created() {

    },
    methods: {
      fetchData(){
        controllerAPI.list(this.page).then(res=>{
          console.log(res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      dateFmt1(row){
        if(!row.kaiGongDate){
          return ''
        }
        return this._util.formatDateToString(row.kaiGongDate)
      },
      dateFmt2(row){
        if(!row.junGongDate){
          return ''
        }
        return this._util.formatDateToString(row.junGongDate)
      },
      showDetail(id){
        this.$router.push('/project-info/project-detail/'+id)
/*        this.$router.push({
          name:'ProjectDetail',
          params: {
            id: id
          }
        })*/
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
